<!--
 * @Author: wangming
 * @Date: 2020-09-09 14:04:55
 * @LastEditors: wangming
 * @LastEditTime: 2021-12-10 16:09:57
 * @Description:添加类别按钮
-->
<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="780px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>国际化配置</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>
    <div class="table-list pr20 pl20">
      <el-row :gutter="12">
        <el-col :span="6">
          <el-input
            v-model="pageData.searchKey"
            placeholder="请输入关键字"
            clearable
            :maxlength="64"
            @keyup.native.enter="loadData(1)"
            @clear="handleReset"
            prefix-icon="el-icon-search"
          />
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="newTranslate">新建</el-button>
        </el-col>
      </el-row>

      <div class="list">
        <el-table
          class="mt10"
          :data="tableData"
          v-loading="loading"
          style="width: 100%"
          current-row-key="id"
          stripe
          border
        >
          <el-table-column width="50" fixed="left">
            <template slot-scope="scope">
              <el-radio v-model="selectedLangCode" :label="scope.row.key">{{
                ""
              }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="key" label="资源标识" fixed="left" />
          <template v-for="item in columnList">
            <el-table-column
              :key="item.key"
              :prop="item.key"
              :label="item.region"
            />
          </template>
        </el-table>
      </div>
    </div>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>
    <div slot="footer" class="tr">
      <el-button @click="showVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit" :loading="loading"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import TranslateStageModal from "../../pages/appModule/index/globalization/__components__/translateStageModal/index";
import { cloneDeep } from "lodash";
import {
  getHmi18ninfoPageList,
  postHmi18ninfo,
} from "@/apis/paas/HmI18nInfoController.js";
import { getHmi18nlocaleList } from "@/apis/paas/HmI18nLocaleController.js";
export default {
  components: {
    TranslateStageModal,
  },
  computed: {},
  data() {
    return {
      loading: false,
      showVisible: false,
      callback: () => {},

      selectedLangCode: "",

      pageData: {
        pageSize: 10,
        pageNo: 1,
        searchKey: "",
      },
      tableData: [],
      columnList: [],
      total: 0,
    };
  },

  methods: {
    newTranslate() {
      TranslateStageModal.addForm(this.columnList, true).then((data) => {
        postHmi18ninfo(data).then((res) => {
          if (data.type == "select") {
            this.selectedLangCode = data.key;
            this.submit();
          } else {
            this.loadData(1);
          }
        });
      });
    },
    addForm() {
      return this.showModel();
    },
    loadData(pageNo) {
      pageNo && (this.pageData.pageNo = pageNo);
      getHmi18ninfoPageList({
        ...this.pageData,
      }).then((res) => {
        this.tableData = res.data?.map((item) => {
          const localeObj = {};
          item.infoList.forEach((ele) => {
            localeObj[ele.locale] = ele.info;
          });
          return {
            key: item.key,
            ...localeObj,
          };
        });
        this.total = res.totalCount;
      });
    },
    getColumns() {
      getHmi18nlocaleList().then((res) => {
        this.columnList = res.map((item) => {
          return { key: item.key, region: item.region };
        });
      });
    },

    handleReset() {
      this.pageData = {
        pageSize: 10,
        pageNo: 1,
        searchKey: "",
      };
      this.loadData();
    },

    async showModel() {
      this.pageData.searchKey = "";
      this.getColumns();
      await this.loadData();
      this.showVisible = true;
      this.loading = false;

      this.selectedLangCode = "";
      return {
        then: (callback) => {
          if (typeof callback === "function") {
            this.callback = callback;
          }
        },
      };
    },
    async submit() {
      try {
        this.loading = true;
        this.showVisible = false;
        this.callback(cloneDeep(this.selectedLangCode));
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped></style>
